import React, { useEffect, useState } from 'react'
import Top from '../../components/Top/Top'
import { reqCartlist, reqCartedit, reqCartdel } from "../../request/api"

import "./Shop.css"
const Shop = () => {
    const title = "购物车"
    //定变量-初始值
    const [Cartlist, setCartlist] = useState([])
    const [allChecked, setAllChecked] = useState(false)
    const [isreq, setIsreq] = useState(true)
    const { uid } = JSON.parse(sessionStorage.getItem("info"))
    //进页面--发请求--修改
    useEffect(() => {
        update()
    }, [])
    console.log("=============页面更新了===============");
    // let showgoods=goods.length>0?goods[n].content:[];
    // let showcoupon=coupon.length>0?coupon[c].content:[];
    let update = () => {
        let checkedArr = [...Cartlist]
        reqCartlist({ uid }).then(res => {
            if (res.data.code == 200) {
                let list = res.data.list[1].content ? res.data.list[1].content : []
                list.map(item => (
                    item.checked = checkedArr.find(i => i.id == item.id) ? checkedArr.find(i => i.id == item.id).checked : false
                ))
                // console.log(list);
                setCartlist(list)
                setIsreq(true)
            }
        })

    }
    let changeOne = (e, id) => {
        let list = [...Cartlist]
        list.find(item => item.id === id).checked = e
        setCartlist(list)
        let allChecked = Cartlist.every((item) => item.checked);
        setAllChecked(allChecked)
    }
    let changeAlls = (e) => {
        setAllChecked(e)
        let list = [...Cartlist]
        list.map(item => (item.checked = e))
        setCartlist(list)

    }
    let add = (id) => {
        reqCartedit({ id, type: 2 }).then(res => {
            if (res.data.code === 200) {
                update()
            }
        })
    }
    let del = (id, num) => {
        if (num <= 1) {
            alert("宝贝不能再少了")
            return
        }
        if (isreq) {
            setIsreq(false)
            reqCartedit({ id, type: 1 }).then(res => {
                if (res.data.code === 200) {
                    update()
                }
            })
        }

    }
    let reqCartdell = (id) => {
        reqCartdel({ id }).then(res => {
            if (res.data.code === 200) {
                update()
            }
        })
    }
    let price = Cartlist.reduce(
        (val, item) => (item.checked ? (val += item.price * item.num) : val),
        0
    ).toFixed(2);
    return (
        <div>
            <Top title={title}></Top>
            {
                Cartlist.map((item) => (
                    <div className="shop_item" key={item.id}>
                        <input className="shop_item_input" checked={item.checked}
                            onChange={(e) => changeOne(e.target.checked, item.id)}
                            type="checkbox" name="" id="" />
                        <div className="shop_item_img">
                            <img src={item.img} alt="" />
                        </div>
                        <div className="shop_item_right">
                            <div>{item.goodsname}</div>
                            <div>price:{item.price}</div>
                            <button onClick={() => del(item.id, item.num)}>-</button>
                            <span >{item.num}</span>
                            <button onClick={() => add(item.id)}>+</button>
                            <button className="shop_del" onClick={() => reqCartdell(item.id)}>删除</button>
                        </div>
                    </div>
                ))
            }
            <div className="shop_b_div">
                <input type="checkbox" className="shop_checkAll" checked={allChecked} onChange={(e) => changeAlls(e.target.checked)} /> 全选
                合计：<span >{price}</span>
                <button>去结算 </button>
            </div>
        </div>
    )
}

export default Shop
